<!--
  模块：专项申报 - 修改
-->
<template>
  <div class="declare-edit">
    <AppMainHeader>
      <el-row>
        <el-col :span="24" class="align-right">
          <el-button type="primary" @click="handleUpdate">保存</el-button>
          <el-button type="primary" @click="handleAddSubmit">发布</el-button>
        </el-col>
      </el-row>
    </AppMainHeader>
    <AppMainContent>
      <el-card>
        <CardFormTitle title="申报信息" />
        <CardFormContent>
          <!-- 表单内容 -->
          <el-form
            :inline="true"
            label-position="top"
            :model="editContent"
            ref="editContent"
            :rules="rules"
            label-width="auto"
          >
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="申报标题" prop="title">
                  <el-input
                    clearable
                    class="formTitle"
                    v-model="editContent.title"
                    prop="title"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="申报开始时间" prop="startTime">
                  <el-date-picker
                    type="datetime"
                    prefix-icon="el-icon-date"
                    v-model="editContent.startTime"
                    prop="startTime"
                    format="yyyy-MM-dd HH:mm"
                    value-format="yyyy-MM-dd HH:mm"
                  ></el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="申报截止时间" prop="endTime">
                  <el-date-picker
                    type="datetime"
                    prefix-icon="el-icon-date"
                    v-model="editContent.endTime"
                    prop="endTime"
                    format="yyyy-MM-dd HH:mm"
                    value-format="yyyy-MM-dd HH:mm"
                  ></el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="发布人" prop="publishUserName">
                  <el-input
                    :disabled="true"
                    :value="editContent.publishUserName"
                    prop="createUserName"
                    class="elInput"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="发布时间" prop="publishTime">
                  <el-input
                    :disabled="true"
                    prefix-icon="el-icon-date"
                    :value="editContent.publishTime"
                    prop="publishTime"
                    class="elInput"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 上传 -->
            <el-form :inline="true" label-position="top">
              <el-form-item label="上传文件">
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  multiple
                  :limit="3"
                  :auto-upload="false"
                >
                  <el-button type="primary">上传文件</el-button>
                </el-upload>
                <el-form-item>
                  <el-input
                    disabled
                    style="
                      display: inline-flex;
                      margin-left: 20px;
                      width: 300px;
                    "
                  ></el-input>
                  <i
                    class="el-icon-remove-outline"
                    style="
                      color: red;
                      margin-left: 10px;
                      font-size: 20px;
                      cursor: pointer;
                    "
                  ></i>
                </el-form-item>
              </el-form-item>
            </el-form>

            <!-- 富文本框 -->
            <el-form :inline="true" label-position="top">
              <el-form-item label="文本内容">
                <VueQuillEditor
                  :content.sync="editContent.content"
                  :business-type="1"
                />
              </el-form-item>
            </el-form>
          </el-form>
        </CardFormContent>
      </el-card>
    </AppMainContent>
    <!-- 版权 -->
    <Copyright />
  </div>
</template>

<script>
// 修改和发布
import { updateDeclare } from '@/api/declare/index'

// 版权
import Copyright from '@/components/copyright'
export default {
  name: 'DeclareEdit',
  components: { Copyright },
  data() {
    return {
      editContent: this.$route.params,
      publishUserID: '',
      createTime: '',
      rules:{
          title:[
            {required:true,message:'请输入申报标题',trigger:'blur'},
            {min:2,max:100,message:'标题长度必须为2-30位',trigger:'blur'}
          ],
          startTime:[
            {required:true,message:'请输入申报开始时间',trigger:'blur'},
          ],
          endTime:[
            {required:true,message:'请输入申报结束时间',trigger:'blur'},
          ]
        },
    }
  },
  methods: {
    // 更新发布时间
    currentTime() {
      setInterval(this.formatDate, 500)
    },

    formatDate() {
      let date = new Date()
      let year = date.getFullYear() // 年
      let month = date.getMonth() + 1 // 月
      let day = date.getDate() // 日
      this.editContent.publishTime = `${year}-${month}-${day}`
    },
    // * 修改(保存)
    handleUpdate() {
      let _this = this
      _this.editContent.status = '1'
      _this.editContent.publishTime = ''
      this.$refs['editContent'].validate((valid) => {
        if (valid) {
          if (this.editContent != undefined) {
            updateDeclare(this.editContent).then((response) => {
              _this.$alert(_this.editContent.title + '修改成功！', '消息', {
                confirmButtonText: '确定',
                callback: (action) => {
                  window.location.reload()
                  window.location.href = '/declare/index'
                },
              })
            })
          }
        }
      })
    },
    // * 发布
    handleAddSubmit() {
      // 添加发布时间
      this.currentTime()
      this.formatDate()
      let _this = this
      // 更改状态
      _this.editContent.status = '2'
      // 添加发布人姓名
      _this.editContent.publishUserName = this.$store.state.user.userInfo.userName
      // 添加发布人ID
      _this.editContent.publishUserID = this.$store.state.user.userInfo.id
      this.$refs['editContent'].validate((valid) => {
        if (valid) {
          if (this.editContent != undefined) {
            updateDeclare(this.editContent).then((response) => {
              _this.$alert(_this.editContent.title + '发布成功！', '消息', {
                confirmButtonText: '确定',
                callback: (action) => {
                  window.location.reload()
                  window.location.href = '/declare/index'
                },
              })
            })
          }
        }
      })
    },
  },
  //销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate) // 在Vue实例销毁前，清除时间定时器
    }
  },
  created() {},
}
</script>

<style lang="scss" scoped>
.declare-edit {
  height: 100%;
  overflow: scroll;
}

@import '../declare-scss/index.scss';
</style>
